<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备管理 - 禾行通</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .vehicle-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            padding: 1.5rem;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }
        .vehicle-card:hover {
            transform: translateY(-5px);
        }
        .status-badge {
            font-size: 0.8rem;
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
        }
        .battery-indicator {
            width: 100px;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
        }
        .battery-fill {
            height: 100%;
            transition: width 0.3s ease;
        }
        .filter-tabs {
            background: white;
            border-radius: 10px;
            padding: 0.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .filter-tab {
            border: none;
            background: transparent;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        .filter-tab.active {
            background: #28a745;
            color: white;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 顶部导航 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-success">
        <div class="container">
            <a class="navbar-brand" href="/dashboard">
                <i class="fas fa-arrow-left me-2"></i>设备管理
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="/vehicles/add">
                    <i class="fas fa-plus me-1"></i>添加设备
                </a>
            </div>
        </div>
    </nav>
    
    <div class="container mt-4">
        <!-- 筛选标签 -->
        <div class="filter-tabs">
            <div class="btn-group w-100" role="group">
                <button type="button" class="filter-tab active" data-filter="all">
                    <i class="fas fa-list me-1"></i>全部 <span class="badge bg-secondary ms-1">5</span>
                </button>
                <button type="button" class="filter-tab" data-filter="online">
                    <i class="fas fa-circle text-success me-1"></i>在线 <span class="badge bg-success ms-1">3</span>
                </button>
                <button type="button" class="filter-tab" data-filter="working">
                    <i class="fas fa-cog text-warning me-1"></i>作业中 <span class="badge bg-warning ms-1">2</span>
                </button>
                <button type="button" class="filter-tab" data-filter="maintenance">
                    <i class="fas fa-wrench text-danger me-1"></i>故障 <span class="badge bg-danger ms-1">0</span>
                </button>
            </div>
        </div>
        
        <!-- 设备列表 -->
        <div id="vehicleList">
            <!-- 设备卡片1 -->
            <div class="vehicle-card" data-status="online">
                <div class="row align-items-center">
                    <div class="col-md-2 text-center">
                        <i class="fas fa-tractor fa-3x text-success"></i>
                        <div class="mt-2">
                            <span class="status-badge bg-success text-white">在线</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5 class="mb-2">农机001号</h5>
                        <p class="text-muted mb-1"><i class="fas fa-tag me-1"></i>播种机</p>
                        <p class="text-muted mb-1"><i class="fas fa-map-marker-alt me-1"></i>北区田地 (120.123, 36.456)</p>
                        <div class="d-flex align-items-center">
                            <span class="me-2">电量:</span>
                            <div class="battery-indicator me-2">
                                <div class="battery-fill bg-success" style="width: 85%"></div>
                            </div>
                            <span class="text-success">85%</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="text-primary fw-bold">15.2</div>
                                <small class="text-muted">km/h</small>
                            </div>
                            <div class="col-4">
                                <div class="text-warning fw-bold">75%</div>
                                <small class="text-muted">油量</small>
                            </div>
                            <div class="col-4">
                                <div class="text-info fw-bold">正常</div>
                                <small class="text-muted">负载</small>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="btn btn-outline-primary btn-sm me-1" onclick="viewDetails(1)">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                            <button class="btn btn-outline-success btn-sm me-1" onclick="controlVehicle(1)">
                                <i class="fas fa-gamepad"></i> 控制
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" onclick="viewMaintenance(1)">
                                <i class="fas fa-wrench"></i> 维护
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 设备卡片2 -->
            <div class="vehicle-card" data-status="working">
                <div class="row align-items-center">
                    <div class="col-md-2 text-center">
                        <i class="fas fa-tractor fa-3x text-warning"></i>
                        <div class="mt-2">
                            <span class="status-badge bg-warning text-dark">作业中</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5 class="mb-2">农机002号</h5>
                        <p class="text-muted mb-1"><i class="fas fa-tag me-1"></i>收割机</p>
                        <p class="text-muted mb-1"><i class="fas fa-map-marker-alt me-1"></i>南区田地 (120.234, 36.567)</p>
                        <div class="d-flex align-items-center">
                            <span class="me-2">电量:</span>
                            <div class="battery-indicator me-2">
                                <div class="battery-fill bg-warning" style="width: 60%"></div>
                            </div>
                            <span class="text-warning">60%</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="text-primary fw-bold">12.8</div>
                                <small class="text-muted">km/h</small>
                            </div>
                            <div class="col-4">
                                <div class="text-warning fw-bold">45%</div>
                                <small class="text-muted">油量</small>
                            </div>
                            <div class="col-4">
                                <div class="text-success fw-bold">高负载</div>
                                <small class="text-muted">负载</small>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="btn btn-outline-primary btn-sm me-1" onclick="viewDetails(2)">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                            <button class="btn btn-outline-success btn-sm me-1" onclick="controlVehicle(2)">
                                <i class="fas fa-gamepad"></i> 控制
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" onclick="viewMaintenance(2)">
                                <i class="fas fa-wrench"></i> 维护
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 设备卡片3 -->
            <div class="vehicle-card" data-status="online">
                <div class="row align-items-center">
                    <div class="col-md-2 text-center">
                        <i class="fas fa-tractor fa-3x text-success"></i>
                        <div class="mt-2">
                            <span class="status-badge bg-success text-white">在线</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5 class="mb-2">农机003号</h5>
                        <p class="text-muted mb-1"><i class="fas fa-tag me-1"></i>施肥机</p>
                        <p class="text-muted mb-1"><i class="fas fa-map-marker-alt me-1"></i>东区田地 (120.345, 36.678)</p>
                        <div class="d-flex align-items-center">
                            <span class="me-2">电量:</span>
                            <div class="battery-indicator me-2">
                                <div class="battery-fill bg-success" style="width: 92%"></div>
                            </div>
                            <span class="text-success">92%</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="text-secondary fw-bold">0.0</div>
                                <small class="text-muted">km/h</small>
                            </div>
                            <div class="col-4">
                                <div class="text-success fw-bold">88%</div>
                                <small class="text-muted">油量</small>
                            </div>
                            <div class="col-4">
                                <div class="text-secondary fw-bold">空闲</div>
                                <small class="text-muted">负载</small>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="btn btn-outline-primary btn-sm me-1" onclick="viewDetails(3)">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                            <button class="btn btn-outline-success btn-sm me-1" onclick="controlVehicle(3)">
                                <i class="fas fa-gamepad"></i> 控制
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" onclick="viewMaintenance(3)">
                                <i class="fas fa-wrench"></i> 维护
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 筛选功能
        document.querySelectorAll('.filter-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 更新活动标签
                document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 筛选设备
                const filter = this.dataset.filter;
                const vehicles = document.querySelectorAll('.vehicle-card');
                
                vehicles.forEach(vehicle => {
                    if (filter === 'all' || vehicle.dataset.status === filter) {
                        vehicle.style.display = 'block';
                    } else {
                        vehicle.style.display = 'none';
                    }
                });
            });
        });
        
        // 查看详情
        function viewDetails(vehicleId) {
            window.location.href = `/vehicles/detail/${vehicleId}`;
        }
        
        // 控制设备
        function controlVehicle(vehicleId) {
            window.location.href = `/vehicles/control/${vehicleId}`;
        }
        
        // 查看维护记录
        function viewMaintenance(vehicleId) {
            window.location.href = `/vehicles/maintenance/${vehicleId}`;
        }
        
        // 实时更新设备状态
        function updateVehicleStatus() {
            // 这里可以通过AJAX请求获取最新的设备状态
            console.log('更新设备状态');
        }
        
        // 每5秒更新一次设备状态
        setInterval(updateVehicleStatus, 5000);
    </script>
</body>
</html>